<template>
    <div class="bom-info">
        <!-- 页面标题和操作按钮 -->
        <div class="page-header">
            <div class="header-title">
                <h2>BOM信息查看</h2>
                <p>查看和管理产品物料清单的详细信息</p>
            </div>
            <div class="header-actions">
                <el-button type="primary" @click="handleAdd">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    新增BOM
                </el-button>
            </div>
        </div>

        <!-- 搜索和筛选 -->
        <el-card class="search-card" shadow="never">
            <el-form :model="searchForm" :inline="true" class="search-form">
                <el-form-item label="产品编码">
                    <el-input v-model="searchForm.productCode" placeholder="请输入产品编码" clearable />
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input v-model="searchForm.productName" placeholder="请输入产品名称" clearable />
                </el-form-item>
                <el-form-item label="BOM版本">
                    <el-select v-model="searchForm.version" placeholder="请选择版本" clearable>
                        <el-option label="V1.0" value="1.0" />
                        <el-option label="V2.0" value="2.0" />
                        <el-option label="V3.0" value="3.0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                        <el-option label="有效" value="active" />
                        <el-option label="停用" value="inactive" />
                        <el-option label="草稿" value="draft" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">
                        <el-icon>
                            <Search />
                        </el-icon>
                        搜索
                    </el-button>
                    <el-button @click="handleReset">
                        <el-icon>
                            <Refresh />
                        </el-icon>
                        重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 数据表格 -->
        <el-card class="table-card" shadow="never">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column type="expand">
                    <template #default="props">
                        <div class="expand-content">
                            <h4>物料明细</h4>
                            <el-table :data="props.row.materials" size="small">
                                <el-table-column prop="materialCode" label="物料编码" width="120" />
                                <el-table-column prop="materialName" label="物料名称" width="150" />
                                <el-table-column prop="specification" label="规格" width="120" />
                                <el-table-column prop="quantity" label="用量" width="80" align="right" />
                                <el-table-column prop="unit" label="单位" width="60" />
                                <el-table-column prop="unitPrice" label="单价" width="80" align="right">
                                    <template #default="scope">
                                        ¥{{ scope.row.unitPrice.toFixed(2) }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="totalPrice" label="总价" width="80" align="right">
                                    <template #default="scope">
                                        ¥{{ (scope.row.quantity * scope.row.unitPrice).toFixed(2) }}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="productCode" label="产品编码" width="120" />
                <el-table-column prop="productName" label="产品名称" width="150" />
                <el-table-column prop="version" label="BOM版本" width="100" />
                <el-table-column prop="materialCount" label="物料数量" width="100" align="center" />
                <el-table-column prop="totalCost" label="总成本(元)" width="120" align="right">
                    <template #default="scope">
                        ¥{{ scope.row.totalCost.toFixed(2) }}
                    </template>
                </el-table-column>
                <el-table-column prop="createDate" label="创建日期" width="120" />
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="creator" label="创建人" width="100" />
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="success" size="small" @click="handleCopy(scope.row)">
                            复制
                        </el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-wrapper">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
    productCode: '',
    productName: '',
    version: '',
    status: ''
})

// 表格数据
const tableData = ref([
    {
        id: 1,
        productCode: 'P001',
        productName: '智能手机A1',
        version: 'V2.0',
        materialCount: 15,
        totalCost: 1580.50,
        createDate: '2024-01-15',
        status: 'active',
        creator: '张三',
        materials: [
            { materialCode: 'M001', materialName: '主板', specification: 'MTK6762', quantity: 1, unit: '个', unitPrice: 280.00 },
            { materialCode: 'M002', materialName: '屏幕', specification: '6.1寸IPS', quantity: 1, unit: '个', unitPrice: 450.00 },
            { materialCode: 'M003', materialName: '电池', specification: '3000mAh', quantity: 1, unit: '个', unitPrice: 85.00 }
        ]
    },
    {
        id: 2,
        productCode: 'P002',
        productName: '平板电脑B2',
        version: 'V1.0',
        materialCount: 12,
        totalCost: 2150.80,
        createDate: '2024-01-10',
        status: 'active',
        creator: '李四',
        materials: [
            { materialCode: 'M004', materialName: '主板', specification: 'A12处理器', quantity: 1, unit: '个', unitPrice: 580.00 },
            { materialCode: 'M005', materialName: '屏幕', specification: '10.1寸OLED', quantity: 1, unit: '个', unitPrice: 850.00 },
            { materialCode: 'M006', materialName: '电池', specification: '8000mAh', quantity: 1, unit: '个', unitPrice: 150.00 }
        ]
    }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(89)

// 获取状态类型
const getStatusType = (status: string) => {
    const typeMap: Record<string, string> = {
        active: 'success',
        inactive: 'danger',
        draft: 'warning'
    }
    return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string) => {
    const textMap: Record<string, string> = {
        active: '有效',
        inactive: '停用',
        draft: '草稿'
    }
    return textMap[status] || '未知'
}

// 处理搜索
const handleSearch = () => {
    console.log('搜索条件:', searchForm)
    ElMessage.success('搜索完成')
}

// 处理重置
const handleReset = () => {
    Object.assign(searchForm, {
        productCode: '',
        productName: '',
        version: '',
        status: ''
    })
    ElMessage.success('重置完成')
}

// 处理新增
const handleAdd = () => {
    console.log('新增BOM')
    ElMessage.info('打开新增BOM对话框')
}

// 处理编辑
const handleEdit = (row: any) => {
    console.log('编辑:', row)
    ElMessage.info(`编辑BOM: ${row.productName}`)
}

// 处理复制
const handleCopy = (row: any) => {
    console.log('复制:', row)
    ElMessage.info(`复制BOM: ${row.productName}`)
}

// 处理删除
const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        `确认删除BOM "${row.productName}" 吗？`,
        '确认删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        console.log('删除:', row)
        ElMessage.success('删除成功')
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}

// 处理页码变化
const handleCurrentChange = (page: number) => {
    currentPage.value = page
    console.log('当前页:', page)
}

// 处理每页条数变化
const handleSizeChange = (size: number) => {
    pageSize.value = size
    console.log('每页条数:', size)
}

onMounted(() => {
    console.log('BOM信息页面已加载')
})
</script>

<style scoped>
.bom-info {
    padding: 0;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.header-title h2 {
    margin: 0 0 5px 0;
    color: #303133;
    font-size: 24px;
    font-weight: 600;
}

.header-title p {
    margin: 0;
    color: #909399;
    font-size: 14px;
}

.search-card {
    margin-bottom: 20px;
}

.search-form {
    margin-bottom: 0;
}

.table-card {
    margin-bottom: 0;
}

.expand-content {
    padding: 20px;
    background-color: #f8f9fa;
}

.expand-content h4 {
    margin: 0 0 15px 0;
    color: #303133;
    font-size: 16px;
}

.pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>
